<!DOCTYPE html>
<html lang="en">
    <!-- 
/**
 *  Render Page (display when mocap started)
 *
 *  A part of SysMocap, open sourced under Mozilla Public License 2.0
 * 
 *  https://github.com/xianfei/SysMocap
 * 
 *  xianfei 2022.3
 */ 
-->
    <head>
        <meta charset="utf-8" />
        <title>Mocap</title>

        <meta
            name="viewport"
            content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
        />
        <!-- Three.js -->
        <script src="../node_modules/three/build/three.js"></script>
        <!-- GLTF Loader for Three.js -->
        <script src="../node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
        <script src="../node_modules/three/examples/js/loaders/FBXLoader.js"></script>
        <script src="../node_modules/three/examples/js/libs/fflate.min.js"></script>
        <!-- Orbit Controls for Three.js -->
        <script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>

        <script src="../node_modules/three/examples/js/libs/stats.min.js"></script>

        <!-- VRM Loader for Three.js -->
        <script src="../node_modules/@pixiv/three-vrm/lib/three-vrm.js"></script>
        <!-- Mediapipe -->
        <script src="../node_modules/@mediapipe/holistic/holistic.js"></script>
        <!-- Mediapipe Drawing Tools -->
        <script src="../node_modules/@mediapipe/drawing_utils/drawing_utils.js"></script>
        <!-- Mediapipe Camera Tools -->
        <script src="../node_modules/@mediapipe/camera_utils/camera_utils.js"></script>
        <link rel="stylesheet" href="render.css" />
        <link rel="stylesheet" href="../node_modules/mdui/dist/css/mdui.css" />
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script src="../node_modules/mdui/dist/js/mdui.js"></script>
    </head>

    <body>
        <!-- virtual 3d model show here -->
        <div
            id="model"
            style="
                width: 48%;
                border: solid 1px #ccc;
                border-radius: 10px;
                height: fit-content;
                top: 10px;
                left: 10px;
                overflow: hidden;
                position: fixed;
            "
        ></div>

        <div id="status" style="position: absolute; bottom: 140px">
            <span style="position: absolute; left: 10px; font-size: 12px"
                >Render</span
            >
            <span style="position: absolute; left: 100px; font-size: 12px"
                >Mocap</span
            >
        </div>

        <div
            id="controller"
            style="position: absolute; bottom: 95px; right: 20px"
        >
            <div
                style="
                    display: inline-block;
                    margin-left: -85px;
                    color: #777;
                    position: absolute;
                "
            >
                <i
                    class="mdui-icon material-icons"
                    style="transform: scale(0.8)"
                    >videocam</i
                ><span style="font-size: 12px; margin-left: 5px">相机视角</span>
            </div>
            <div
                class="targetButton mdui-ripple"
                v-bind:class="{'mdui-color-theme':target == 'full'}"
                onclick="changeTarget('full')"
            >
                <div class="my-icon">
                    <i
                        class="mdui-icon material-icons"
                        style="transform: scale(0.8); margin-top: -3px"
                        >accessibility</i
                    >
                </div>
                <span>全身</span>
            </div>
            <div
                class="targetButton mdui-ripple"
                v-bind:class="{'mdui-color-theme':target == 'half'}"
                onclick="changeTarget('half')"
            >
                <div class="my-icon">
                    <i
                        class="mdui-icon material-icons"
                        style="transform: scale(1.2); margin-top: 3px"
                        >accessibility</i
                    >
                </div>
                <span>半身</span>
            </div>
            <div
                class="targetButton mdui-ripple"
                v-bind:class="{'mdui-color-theme':target == 'face'}"
                onclick="changeTarget('face')"
            >
                <div class="my-icon">
                    <i
                        class="mdui-icon material-icons"
                        style="transform: scale(1.2)"
                        >person</i
                    >
                </div>
                <span>特写</span>
            </div>
        </div>

        <div
            style="
                position: fixed;
                left: calc(50vw - 100px);
                bottom: 80px;
                width: 200px;
                height: 40px;
                border-radius: 20px;
                background-color: #fffe;
            "
            class="mdui-shadow-5"
            id="loading"
        >
            <div
                class="mdui-spinner mdui-spinner-colorful"
                style="margin: 10px 15px; width: 20px; height: 20px"
            ></div>
            <span
                style="
                    line-height: 40px;
                    position: fixed;
                    color: #555;
                    font-size: 14px;
                    margin-left: -3px;
                "
                >初始化动作捕捉引擎…</span
            >
        </div>

        <div
            id="recording"
            style="
                position: fixed;
                bottom: 20px;
                height: 40px;
                width: 200px;
                background-color: #a40601;
                left: calc(50% - 100px);
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                display: none;
                color: #fff;
            "
        >
            正在录制，按R键停止
        </div>

        <canvas
            id="background-canvas"
            style="position: absolute; top: -99999999px; left: -9999999999px"
        ></canvas>

        <script src="../utils/html2canvas.js"></script>
        <script src="../utils/RecordRTC.js"></script>
        <script src="../node_modules/kalidokit/dist/kalidokit.umd.js"></script>
        <script src="./render.js" defer></script>
    </body>
</html>
